import React, { Component } from 'react';
import {  Link, withRouter } from 'react-router-dom';
import '../css/sidebar.css';
import menuList from './MenuConfig';
import { Menu } from 'antd';
const { SubMenu } = Menu;

class Sidebar extends Component {
    getMenuNode = (menuList) => {

        const path = this.props.location.pathname;

        return menuList.map(item => {
            if (!item.children) {
                return (
                    <Menu.Item key={item.key} className='menuItem'>
                        <Link to={item.key}>{item.title}</Link>
                    </Menu.Item>
                )
            }
            const cItem = item.children.find(cItem => cItem.key === path)
            if (cItem) {
                this.openKey = item.key
            }
            return (
                <SubMenu key={item.key} title={item.title} className='menuItem'>
                    {
                        this.getMenuNode(item.children)
                    }
                </SubMenu>
            )

        })
    }
    render() {
        const menuNode = this.getMenuNode(menuList);
        const selectKey = this.props.location.pathname;
        return (
            <div className='nav' id='nav'>
                <Menu
                    defaultSelectedKeys={[selectKey]}
                    defaultOpenKeys={[this.openKey]}
                    mode="inline"
                    theme="light"
                >
                    {
                        menuNode
                    }
                </Menu>
            </div>
        )
    }
}

export default withRouter(Sidebar)
